<template>
    <div class="tobe-box">
        <!-- 未收款 -->
        <!-- 表单信息 隐藏单据状态-->
        <Tickets @subSearch="subSearch" :flagStatus="false" />
        <!-- 表格信息 -->
        <Table :tableData="tableData" @handleChange="handleChange" @updateLimitHandler="updateLimitHandler" :page="pageNum"
            :limit="pageSize" :total="total" @orderData="orderData" />
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import Table from '@/components/table/indexs.vue'
import Tickets from '@/components/Tickets'
import { getselectOrderApi } from '@/api/tickets/index.js'
let total = ref(100)
let pageNum = ref(1)    // 页数
let pageSize = ref(50)  // 条数
import dayjs from 'dayjs'

let idActive = 'orderId'

// 表单数据
const tableData = ref([])

// 未收款接口
let getselectOrderData = async (v) => {
    let paramss = {
        paymentStatus: '未收款',
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    let params = Object.assign(paramss, v)

    let res = await getselectOrderApi(params)
    let { code, rows } = res
    if (code === 200) {
        total.value = res.total
        tableData.value = rows
    }
}
// 删除后调用查询最新的顶单
const orderData = () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    getselectOrderData(params)
}

// 分页器条数
const updateLimitHandler = (v) => {
    pageSize.value = v
}
let orderDateLte = ref(null)
let orderDateGte = ref(null)
let searchData = ref(null)
// 查询
const subSearch = (v) => {
    orderDateLte.value = v.orderDate ? v.orderDate[0] : null
    orderDateGte.value = v.orderDate ? dayjs(v.orderDate[1]).subtract(1,'second').format('YYYY-MM-DD HH:mm:ss') : null
    let params = {
        orderDateLte: orderDateLte.value,
        orderDateGte: orderDateGte.value,
        ...v
    }
    params.orderDate = null
    pageNum.value = 1
    searchData.value = v
    getselectOrderData(params)
}
// 分页器
const handleChange = (v) => {
    let { page, limit } = v.page
    let params = {
        ...searchData.value,
        orderDateLte: orderDateLte.value,
        orderDateGte: orderDateGte.value,
    }
    params.orderDate = null
    pageNum.value = page
    pageSize.value = limit
    getselectOrderData(params)
}
onMounted(() => {
    getselectOrderData()
})
</script>
<style scoped lang='scss'></style>
